<template>
  <div id="app">
    <div class="app_logo">
      <div class="app_logo_img">
        <img src="https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS8wOWVkZGY5MzgwMDczZDk5ODYwMzQ5ZDE4MzdjNjllNS05MC53ZWJw.webp" alt="">
      </div>
      <div class="app_logo_Telephone">
        <img src="https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS9hZWI3ZWVhMDE3NTZlYWRlZmMyMDY4MmIxNWNhN2Q0OC5wbmc_p_p100_p_2FYXR0YWNobWVudF9pZD0xMzk2OQ_p_p100_p_3D_p_p100_p_3D.png" alt="">
        <span>400-8888-8888</span>
      </div>
    </div>
   <div class="whole">
        <div class="nav">
            <div class="nav_l">
                  <router-link :to="i.path" v-for="(i,$index) in to" :key="$index" :class="index==$index?'activea':''">
                    <div class="nav_list">
                        <div>{{i.t}}<span>{{i.c}}</span></div>
                    </div>
                  </router-link>
            </div>
        </div>
        <div class="content">  
            <router-view/>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
        to:[
          {t:'首页',c:'HOME',path:'/'},
          {t:'机械设备',c:'PRODUCTS',path:'/machile1'},
          {t:'新闻质询',c:'NEWS',path:'/machile2'},
          {t:'关于我们',c:'ABOUT',path:'/machile3'},
          {t:'核心团队',c:'TEAM',path:'/machile4'},
          {t:'联系我们',c:'CONTACT',path:'/machile5'},
        ],
    index:0
    }
  },
}
</script>

<style>
    *{
      margin: 0;
      padding: 0;
      margin-bottom: 0;
    }
    .clearfix{
      clear: both;
    }
    .iconfont {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: 0.2px;
      -moz-osx-font-smoothing: grayscale;
    }
    #app{
      width: 100%;
    }
    .app_logo{
      width: 100%;
      height: 60px;
      padding-top: 10px;
      box-sizing: border-box;
    }
    .app_logo_img{
      height: 38px;
      width: 180px;
      float: left;
      margin-left: 10%;
    }
    .app_logo_img>img{
      width: 180px;
      height: 38px;
    }
    .app_logo_Telephone{
      width: 200px;
      height: 38px;
      float: right;
      margin-right: 5%;
    }
    .app_logo_Telephone>img{
      width: 26px;
      height: 38px;
      float: left;
    }
    .app_logo_Telephone>span{
      height: 38px;
      font-size: 20px;
      color: #CF372D;
      line-height: 38px;
      display: block;
      float: right;
      margin-right: 20px;
    }
    .whole{
        width: 100%;
    }
    .nav{
        width: 100%;
        height: 70px;
        background: #cf372d;
        padding-top: 5px;
        box-sizing: border-box;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .nav_l>a{
        text-decoration: none;
        color: #fff;
    }
    .nav_l{
        height: 100%;
        margin-left: 10%;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .nav_list{
        width: 120px;
        height:65px;
        display: inline-block;
        padding-top: 10px;
        box-sizing: border-box;
    }
    .activea{
        background: #fff  ;
        color: #cf372d  !important;
    }
    
    .nav_list:hover{
        background: #fff; 
        color: #cf372d;
    }
    .nav_list>div{
        font-size: 18px;
        text-align: center;
        display: block;
    }
    .nav_list>div>span{
        display: block;
        font-size: 14px;
        line-height: 30px;
    }
</style>
